<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:c="http://mybatis.org/schema/mybatis-mapper">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link th:href="@{/bootsrap/bootstrap.css}" rel="stylesheet">
    <link th:href="@{/css/mystyle.css}" rel="stylesheet">
    <script th:src="@{/jquery/jquery-1.11.3.min.js}"></script>
    <script th:src="@{/jquery/bootstrap.min.js}"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div th:replace="~{commons/bar::topbar(activeUri='admin')}"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend><h1 style="color: #2e6da4">用户信息展示</h1></legend>
</fieldset>
<hr style="height: 5px;background-color:pink"/>
<div class="demoTable">
    搜索ID：
    <div class="layui-inline">
        <input name="id" class="layui-input" id="uid" autocomplete="off">
    </div>
    用户名：
    <div class="layui-inline">
        <input name="username" class="layui-input" id="username" autocomplete="off">
    </div>
    <button class="layui-btn layui-btn-radius" data-type="reload">搜索</button>
</div>

<!-- 修改用户信息模态框（Modal） -->
<div class="modal fade" id="editUserInfoModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">修改用户信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="userForm" role="form" method="get">
                    <input type="text" name="id" id="id" hidden>
                    <div class="form-group">
                        <label for="name" class="col-sm-2 control-label">名字</label>
                        <div class="col-sm-10">
                            <input type="text" name="username" id="name" class="form-control" placeholder="请输入名字">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="upassword" class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-10">
                            <input type="text" name="password" class="form-control" id="upassword" placeholder="请输入密码">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="uemail" class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-10">
                            <input type="text" name="email" class="form-control" id="uemail" placeholder="请输入邮箱">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="button" data-dismiss="modal" class="btn btn-default">返回</button>
                            <button type="button" class="btn btn-default" onclick="editUserInfo()">修改</button>
                        </div>
                    </div>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


<!-- 删除用户信息模态框（Modal） -->
<div class="modal fade" id="deleteUserInfoModel" tabindex="-1" role="dialog" aria-labelledby="deleteUserInfoModel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">删除用户信息</h4>
            </div>
            <div class="modal-body">
                <form method="get">
                    <input type="text" name="id" id="id" hidden>
                    <div class="form-group">
                        <label class="control-label">确定要删除该用户信息？</label>
                    </div>
                    <div class="form-group">
                        <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>

                        <button type="button" class="btn btn-primary" onclick="deleteUser()">确认</button>
                    </div>

                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


<!--<div>
    &lt;!&ndash;<h1 style="color: #2e6da4">视频展示</h1>&ndash;&gt;


    <div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;">
        <button class="layui-btn" data-method="notice">示范一个公告层</button>
        <button class="layui-btn" data-method="notice">示范一个公告层</button>
    </div>
    <table class="layui-table" lay-skin="nob" lay-even="">
        <colgroup>
            <col width="150">
            <col width="150">
            <col width="200">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th>ID</th>
            <th>用户名</th>
            <th>邮箱</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="user:${userList.list}">
            <td th:text="${user.id}"></td>
            <td th:text="${user.username}"></td>
            <td th:text="${user.email}"></td>
            <td>
                <a  class="layui-btn layui-btn-xs" lay-event="edit" data-type="auto" data-method="offset">编辑</a>
                <a  class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" data-type="auto" data-method="offset">删除</a>
            </td>
        </tr>
        </tbody>
    </table>
    <div class="numbers" style="margin-left: 460px;">
        <ul class="pagination">
            <p>当前 <span th:text="${pageInfo.pageNum}"></span> 页,总 <span th:text="${pageInfo.pages}"></span> 页,共 <span th:text="${pageInfo.total}"></span> 条记录</p>

            <li><a th:href="@{/admin/selectUserWithPage}">首页</a></li>
            <li><a th:href="@{/admin/selectUserWithPage(p=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1)}">&laquo;上一页</a></li>

            &lt;!&ndash;<c:if test="${pageInfo.navigatePages}">
               &lt;!&ndash; 在页面展示出6条页码数&#45;&ndash;&gt;
                <c:forEach begin="${pageInfo.pageNum}" end="${pageInfo.pageNum<=pageCount-1?pageInfo.pageNum+1:pageCount}" var="pageNum">
                    <li th:class="${pageInfo.pageNum == pageNum}?'active'">
                    <a th:text="${pageNum}" th:href="@{/admin/selectUserWithPage(p=${pageInfo.pages})}"></a>
                    </li>
                </c:forEach>
            </c:if>
            <li th:class="${pageInfo.pageNum == pageNum}?'disabled'"></li>

            <li><a th:text="${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1" th:href="@{/admin/selectUserWithPage(p=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1)}"></a></li>
            <li><a th:text="${pageInfo.nextPage}?${pageInfo.nextPage}:1" th:href="@{/admin/selectUserWithPage(p=${pageInfo.nextPage}?${pageInfo.nextPage}:1)}"></a></li>&ndash;&gt;


&lt;!&ndash;            <li th:each="i:${#numbers.sequence(1,5)}">

                <a th:value="" th:href="@{/admin/selectUserWithPage(p=${pageInfo.pages})}"></a>
            </li>&ndash;&gt;

            <li><a th:href="@{/admin/selectUserWithPage(p=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages})}">&raquo;下一页</a></li>
            <li><a th:href="@{/admin/selectUserWithPage(p=${pageInfo.pages})}">尾页</a></li>

        </ul>
    </div>
</div>-->
<table class="layui-hide" id="userInfo" style="align-content: center" lay-filter="editUser"></table>
<script src="/layui/layui.all.js"></script>

<script>
    layui.use('table', function () {
        var table = layui.table;

        table.render({
            elem: '#userInfo'
            , url: 'http://localhost:8082/admin/selectUserWithPage'
            , cols:
                [
                    [
                        {field: 'id', width: 180, id: 'id', title: 'ID', sort: true}
                        , {field: 'username', width: 220, id: 'username', title: '用户名', sort: 'true'}
                        , {field: 'password', width: 220, id: 'password', title: '密码', hide: 'true'}
                        , {field: 'email', width: 260, id: 'email', title: '邮箱', sort: true}
                        , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 160}
                    ]
                ]
            , id: 'testReload'
            , page: true
        });

        var $ = layui.$, active = {
            reload: function () {
                var uid = $('#uid');
                var username = $('#username');

                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        id: uid.val(),
                        username: username.val()
                    }
                }, 'data');
            }
        };

        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //监听行单击事件（双击事件为：rowDouble）
        table.on('tool(editUser)', function (obj) {
            var data = obj.data;
            var id = data['id'];
            var username = data['username'];
            var password = data['password'];
            var email = data['email'];
            $("#id").val(id);
            $("#name").val(username);
            $("#upassword").val(password);
            $("#uemail").val(email)

            //标注选中样式
            obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
        });

    });
</script>
<script id="barDemo" type="text/html">
    <a class="layui-btn layui-btn-xs" lay-event="edit" data-toggle="modal" data-target="#editUserInfoModel">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" data-toggle="modal" data-target="#deleteUserInfoModel"
       lay-event="del">删除</a>
</script>

<script>
    function editUserInfo() {

        $.post("/admin/editUserInfo",
            $("#userForm").serialize(),
            function (data) {
                if (data == "OK") {
                    alert("商品信息更新成功！");
                    window.location.reload();
                } else {
                    alert("商品信息更新失败！");
                    window.location.reload();
                }
            }
        )

    }

    function deleteUser() {
        var id=document.getElementById("id").value;
        $.post("/admin/deleteUser",
            {
                id:id
            },
            function (data) {
                if (data == "OK") {
                    alert("商品信息更新成功！");
                    window.location.reload();
                } else {
                    alert("商品信息更新失败！");
                    window.location.reload();
                }
            }
        )

    }
</script>
</body>
</html>